<template>
  <div>
    <el-dialog
      title="下发指令"
      :visible.sync="dialogVisible"
      width="850px"
      top="10vh"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="header">
        <div class="header_left">
          <el-form
            :inline="true"
            ref="refSearchForm"
            class="search-form"
            size="small"
          >
            <el-form-item size="small">
              <el-select
                v-model="commandResult"
                filterable
                placeholder="指令结果"
                clearable
                @change="searchClick"
                style="width: 160px"
              >
                <el-option
                  v-for="(item, i) in commandResultList"
                  :key="i"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item size="small" class="search-button">
                        <el-button size="small" @click="searchClick" class="el_button" :loading="loadingSearch">查询
                        </el-button>
                        <el-button class="el_button" size="small" @click="resetClick" :loading="loadingReset">重置</el-button>
                          </el-form-item> -->
          </el-form>
        </div>
        <div class="header_right">
          <!-- <el-button class="el_button" size="small" icon="el-icon-position" @click="addClick">
                        下发指令
                    </el-button> -->

          <div v-if="deviceInfo.classMark === 'LK-SGBJ-01'">
            <el-button
              class="el_button"
              size="small"
              icon="el-icon-position"
              @click="addClick"
            >
              指令下发
            </el-button>
          </div>
          <el-button
            class="el_button"
            size="small"
            icon="el-icon-position"
            @click="submit"
            v-else
          >
            消音下发
          </el-button>
        </div>
      </div>
      <div class="content">
        <el-table
          :data="dataList"
          class="table"
          height="370"
          ref="refTable"
          row-key="id"
          :header-cell-style="headerStyle"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
            height="30"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="serviceType"
            label="服务标识"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="serviceValue"
            label="服务值"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="createUsername"
            label="操作人"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="commandResult"
            label="指令结果"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <el-tag type="success" size="mini" v-if="row.commandResult == 1"
                >执行成功</el-tag
              >
              <el-tag type="danger" size="mini" v-if="row.commandResult == 2"
                >执行失败</el-tag
              >
              <el-tag type="warning" size="mini" v-if="row.commandResult == 3"
                >待下发</el-tag
              >
              <el-tag type="danger" size="mini" v-if="row.commandResult == 4"
                >下发失败</el-tag
              >
              <el-tag type="success" size="mini" v-if="row.commandResult == 5"
                >已下发</el-tag
              >
              <el-tag type="success" size="mini" v-if="row.commandResult == 6"
                >已送达</el-tag
              >
              <el-tag type="info" size="mini" v-if="row.commandResult == 7"
                >已取消</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="createTime"
            label="下发时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="取消"
                placement="bottom"
                v-if="scope.row.commandResult == 3"
              >
                <i
                  @click="delClick(scope.row)"
                  class="iconfont xianshi_quxiao tableBtnIcon"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="重发"
                placement="bottom"
                v-else-if="
                  (scope.row.commandResult == 2 ||
                    scope.row.commandResult == 4 ||
                    scope.row.commandResult == 5 ||
                    scope.row.commandResult == 6) &&
                  deviceInfo.classMark === 'LK-SGBJ-01'
                "
              >
                <i
                  @click="resendClick(scope.row)"
                  class="iconfont zhongfa tableBtnIcon"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :page.sync="page"
          :limit.sync="limit"
          :total="total"
          @pagination="CommandPage"
          class="pagination"
        >
        </pagination>
      </div>
    </el-dialog>

    <commandService
      ref="refcommandService"
      :deviceInfo="deviceInfo"
      :CommandInfo="CommandInfo"
    ></commandService>
  </div>
</template>

<script>
import {
  reqRemove,
  reqCommandPage,
  reqCommandServicePage,
  reqCommand,
  reqAddSoundLightVoiceAlarm,
  reqCommandResend,
} from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
// import commandService from "./commandService.vue"; //指令下发
import commandService from "@/views/deviceList/terminal/components/commandService.vue"; //指令下发

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
    identifier: {
      type: String,
      default: () => "",
    },
    serviceType: {
      type: String,
      default: () => "",
    },
    serviceValue: {
      type: String,
      default: () => "",
    },
  },
  components: {
    Pagination,
    commandService,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      page: 1,
      limit: 10,
      total: 0,
      dataList: [],
      CommandInfo: [],
      commandResult: "",
      commandResultList: [
        {
          id: 1,
          name: "执行成功",
        },
        {
          id: 2,
          name: "执行失败",
        },
        {
          id: 3,
          name: "待下发",
        },
        {
          id: 4,
          name: "下发失败",
        },
        {
          id: 5,
          name: "已下发",
        },
        {
          id: 6,
          name: "已送达",
        },
        {
          id: 7,
          name: "已取消",
        },
      ],
      loadingSearch: false, //查询按钮loading
      loadingReset: false, //重置按钮loading
      timeDevice1: "", //时间开始
      timeDevice2: "", //时间结束
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 选当前时间之后的时间
        },
      },
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.CommandPage();
      }
    },
  },
  methods: {
    async delClick(row) {
      const result = await this.$confirm(
        "此操作将取消下发指令, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqRemove(row.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("取消下发指令成功！");
      this.CommandPage();
    },
    async resendClick(row) {
      const result = await this.$confirm(
        "此操作将重新下发该指令, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqCommandResend(row.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("重发指令成功！");
      this.CommandPage();
    },
    async submit(e) {
      const result = await this.$confirm(
        "此操作将对该设备进行消音下发，是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqCommand({
        serviceType: this.serviceType,
        serviceValue: this.serviceValue,
        imei: this.deviceInfo.imei,
        deviceId: this.deviceInfo.deviceId,
        identifier: this.identifier,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("消音下发成功！");
      setTimeout(() => {
        this.CommandPage();
      }, 1000);
    },
    async addClick() {
      const res = await reqCommandServicePage(1, 50, {
        productModel: this.deviceInfo.classMark,
        protocol: this.deviceInfo.protocol,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      if (res.data.total == 0)
        return this.$modal.notifyWarning("没有可下发的指令");
      this.CommandInfo = JSON.parse(JSON.stringify(res.data.rows));
      this.$refs.refcommandService.dialogVisible = true;
    },
    // 指令列表
    async CommandPage() {
      const res = await reqCommandPage(this.page, this.limit, {
        commandResult: this.commandResult,
        serviceType: "",
        imei: this.deviceInfo.imei,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.CommandPage();
    },
    // 重置
    async resetClick() {
      this.commandResult = "";
      this.page = 1;
      this.limit = 10;
      this.CommandPage();
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },

    // 点击关闭弹框
    closeDialog() {
      this.commandResult = "";
      this.total = 0;
      this.page = 1;
      this.limit = 10;
      this.dialogVisible = false;
    },
  },
  deactivated() {
    this.closeDialog();
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

.header {
  display: flex;
  justify-content: space-between;

  .header_left {
    height: 100%;
    display: flex !important;
    align-items: flex-start !important;
  }

  .header_right {
    height: 100%;
    margin-top: 5px;
  }

  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;

    .label {
      margin: 0 10px;

      .name {
        font-size: 16px;
      }
    }
  }

  .right {
    margin-right: 10px;
  }
}
</style>
